<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>

<script src="../../javascript/react.development.js"></script>
<script src="../../javascript/react-dom.development.js"></script>
<script src="../../javascript/babel.min.js"></script>

<script type="text/babel">
    /*
    * JS语句和JS表达式：
    *   表达式会产生一个值，可以放在任何一个需要值的地方
    *   语句不会产生一个值
    *  一般情况下，在js里每一行就是一个语句。
    *   语句是为了完成某种任务而进行的操作，比如赋值语句：var a = 1+3 在这条语句中，上面的1+3就是表达式。
    *   语句和表达式的区别在于，语句是为了进行某种操作，一般情况下不需要返回值，而表达式都是为了得到返回值，一定会返回一个值（这里的值不包括undefined）
    * */
    const array = ["Vue", "React", "Angular"]
    const vdom = (
        <div>
            <h1>前端JavaScript三大框架</h1>
            <ul>
                {array.map((item, index) => <li key={index}>{item}</li>)}
            </ul>
        </div>
    )
    ReactDOM.render(vdom, document.querySelector("#root"))
</script>
</body>
</html>